<template>
  <div class="container">
    <section class='f-mtp10'>
      <div class='u-title'>
        <h2>筛选查询</h2>
      </div>
      <div class='u-content u-filter f-ptp10'>
        <div class='u-filter-item'>
          <label for="">广告名称：</label>
          <el-input class='w-200' clearable v-model="title" placeholder="广告名称"></el-input>
        </div>
        <div class='u-filter-item'>
          <label for="">广告位置：</label>
          <el-select class='w-200' v-model="bannerType" clearable placeholder="请选择">
            <el-option
              v-for="item in bannerTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button class='f-h40 f-mbt10' @click="getList" type="primary">查询</el-button>
      </div>
    </section>

    <div class='f-mtp20'>
      <div class='u-title'>
        <h2>数据列表</h2>
        <router-link class='u-title-btn' to='/home/addAd'>添加广告</router-link>
      </div>
      <el-table
        :data="bannerList"
        border
        style="width: 100%">
        <el-table-column prop="id" label="编号" width="120"></el-table-column>
        <el-table-column prop="title" label="广告名称" width="180"></el-table-column>
        <el-table-column prop="type" label="广告位置" width="180"></el-table-column>
        <el-table-column prop="pic" label="广告图片" width="180">
          <template slot-scope="scope">
            <img class='img-cover' :src="scope.row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="发布时间" width="180">
          <template slot-scope="scope">
            <span>{{format(scope.row.createTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="manage" label="下线/上线" width="120">
          <template slot-scope="scope">
            <el-switch
              @change="isEnableBanner(scope.row)"
              style="display: block"
              v-model="scope.row.state"
              active-value='normal'
              inactive-value='expired'
              active-color="#1ABC9C"
              inactive-color="#e4e4e4">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="manage" label="操作">
          <template slot-scope="scope">
            <router-link  class='s-c-green f-csp f-mrt10' :to='"/home/editAd/" + scope.row.id'>编辑</router-link>
            <span @click="deleteBtnClickEvent(scope.row)" class='s-c-red f-csp'>删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="totalCount > 0" class='f-ptp20 f-pbt20'>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="totalCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BannerManage',
  data() {
    return {
      bannerType: '',
      bannerTypeList: [
        {
          value: 'pc',
          label: 'pc端'
        },
        {
          value: 'app',
          label: 'app端'
        },
        {
          value: 'example',
          label: '案例'
        },
        {
          value: 'video',
          label: '短剧'
        },
        {
          value: 'about',
          label: '关于我们'
        },
        {
          value: 'expert',
          label: '专家'
        }
      ],
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      title: '',  // 广告名称
      bannerList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    format(date) {
      return this._utils.format(date, 'yyyy-mm-dd');
    },
    isEnableBanner(banner) {
      this.updateBanner(banner)
    },
    updateBanner(banner) {
      this.$store.dispatch('UPDATE_BANNER', {
        id: banner.id,
        state: banner.state
      }).then(res => {
        if(res.data.retCode == 0) {
          this.getList();
          this.$message.success(`${banner.state == 'normal' ? '已上线' : '已下线'}`);
        } else {
          this.getList();
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    // 删除按钮点击事件
    deleteBtnClickEvent(row) {
      this.$confirm('确定删除！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteById(row.id)
      })
    },

    // 删除
    deleteById(adId) {
      this.$store.dispatch('UPDATE_BANNER', {
        id: adId,
        state: 'deleted'
      }).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success('删除成功！');
          this.getList();
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 获取广告列表
    getList() {
      this.$store.dispatch('GET_BANNER_LIST', {
        pageNum: this.currentPage - 1,
        pageSize: this.pageSize,
        title: this.title,
        type: this.bannerType
      }).then(res => {
        if(res.data.retCode == 0) {
          this.bannerList = res.data.data;
          this.totalCount = res.data.totalCount;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 分页组件 回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-cover{
  height: 30px;
  max-width: 90px;
}
.top{
  /* display: flex; */
  overflow: hidden;
  padding: 10px 0;
}
.top-item{
  float: left;
  margin-right: 20px;
}
.w-120{
  width: 120px;
}
.w-200{
  width: 200px;
}
</style>
